import React from 'react';
import './PackFailureModal.css';

// 导入背景图片
import xzbjtImg from '../../assets/icon/tk-cw.png';
// 导入关闭按钮图片
import closeImg from '../../assets/login/close.png';
// 导入标题图标
import cwImg from '../../assets/icon/cw.png';

/**
 * 打包失败弹框组件
 * 当用户未选择5个行李时显示提示
 */
const PackFailureModal = ({ isVisible, onClose }) => {
  if (!isVisible) return null;

  return (
    <div className="pack-failure-modal-overlay" onClick={onClose}>
      <div
        className="pack-failure-modal-content"
        onClick={(e) => e.stopPropagation()}
        style={{
          backgroundImage: `url(${xzbjtImg})`,
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center'
        }}
      >

        {/* 提示内容 */}
        <div className="pack-failure-content">
          <div className="pack-failure-title">
            <img src={cwImg} alt="错误图标" className="pack-failure-icon" />
            打包失败
          </div>
          <div className="pack-failure-message">请选择<span className='font-color'>5</span>个行李</div>
          <div className="pack-failure-confirm-btn" onClick={onClose}>
            确定
          </div>
        </div>
      </div>
    </div>
  );
};

export default PackFailureModal;